<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
    <meta name="keywords" content="LightYear,LightYearAdmin" />
    <meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。" />
    <title>后台管理系统模板</title>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../css/materialdesignicons.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/message.css" />
    <style>
        .card-body li {
            list-style-type: none;
            margin: 0 .625rem;
        }
    </style>
</head>

<body>
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <header class="card-header">
                        <div class="card-title">提示框</div>
                    </header>
                    <div class="card-body">
                        <div class="row">
                            <li id="onlyChoseAlert">
                                <a href="#">单次单选弹框</a>
                            </li>
                            <li id="dblChoseAlert">
                                <a href="#">单次双选弹框</a>
                            </li>
                            <li id="manyChoseAlert">
                                <a href="#">多次双选弹框</a>
                            </li>
                            <li id="success"><a href="#">成功</a></li>
                            <li id="message"><a href="#">message</a></li>
                            <li id="alerts"><a href="#">右下角弹框提示</a></li>
                            <!-- <div class="alertTip" id="box">
                                <div class="alertTip_title">
                                    <div>温馨提示</div>
                                    <div>x</div>
                                </div>
                                <div class="timing">
                                    <span class="seconds">10</span>秒后关闭
                                </div>
                                <div class="alertTip_content">
                                    有491份申请企业添加出⼚编号⽇期晚于购机⽇期，其中冻结
                                    申请有0份。查看更多内容，请点击详情处查看
                                </div>
                                <div class="alertTip_footer">
                                    <button class="alertTip_Button">
                                        点击查看
                                    </button>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/simpleAlert.js"></script>
    <script>
        $(function () {
            $('#btn1').click(function () {
                $('#box').animate({
                    marginTop: '-100px',
                    right: '0'
                }) //多属性写在一起  同时触发
            })
            $('#close').click(function () {
                $('#box').remove()
            })
            $('#alerts').click(function () {
                alertDrawer({
                    msg: '123',
                    fun: function () {
                        alert('查看')
                    }
                })
            })
            //消息提示
            $('#message').click(function () {
                var onlyChoseAlert = simpleAlert({
                    content: '操作成功',
                    icon: 'success',
                    drop: true,
                    width: '20%',
                    buttons: {}
                })
            })
            //成功通知！
            $('#success').click(function () {
                var onlyChoseAlert = simpleAlert({
                    content: '操作成功',
                    icon: 'success',
                    buttons: {
                        知道了: {
                            fun: function () {
                                onlyChoseAlert.close()
                            },
                            type: ''
                        }
                    }
                })
            })
            //单次单选弹框
            $('#onlyChoseAlert').click(function () {
                var onlyChoseAlert = simpleAlert({
                    content:
                        '按确定消失,按确定消失，按确定消失按确定消失，按确定消失按确定消失!',
                    buttons: {
                        确定: {
                            fun: function () {
                                onlyChoseAlert.close()
                            },
                            type: 'success'
                        }
                    }
                })
            })
            //单次双选弹框
            $('#dblChoseAlert').click(function () {
                var dblChoseAlert = simpleAlert({
                    title: '提示？',
                    content: '删除该条信息？',
                    buttons: {
                        删除: {
                            fun: function () {
                                dblChoseAlert.close()
                            },
                            type: 'error'
                        },
                        取消: {
                            fun: function () {
                                dblChoseAlert.close()
                            },
                            type: ''
                        }
                    }
                })
            })
            //多次双选弹框
            $('#manyChoseAlert').click(function () {
                var manyChoseAlert = simpleAlert({
                    title: '三次确定',
                    content:
                        '按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键按确定键!',
                    buttons: {
                        确定: {
                            fun: function () {
                                var manyChoseAlert2 = simpleAlert({
                                    content: '再次确定!',
                                    buttons: {
                                        确定: {
                                            fun: function () {
                                                var manyChoseAlert3 =
                                                    simpleAlert({
                                                        content:
                                                            '最后确定!',
                                                        closeAll: true,
                                                        buttons: {
                                                            确定: {
                                                                fun: function () {
                                                                    manyChoseAlert3.close()
                                                                }
                                                            }
                                                        }
                                                    })
                                            }
                                        },
                                        取消: {
                                            fun: function () {
                                                manyChoseAlert2.close()
                                            }
                                        }
                                    }
                                })
                            }
                        },
                        取消: {
                            fun: function () {
                                manyChoseAlert.close()
                            },
                            type: ''
                        }
                    }
                })
            })
            //多次双选弹框全关闭
            $('#manyAllChoseAlert').click(function () {
                var manyAllChoseAlert = simpleAlert({
                    title: '三次确定－全关闭',
                    content: '按确定键!',
                    buttons: {
                        确定: function () {
                            var manyAllChoseAlert2 = simpleAlert({
                                content: '再次确定!',
                                buttons: {
                                    确定: function () {
                                        var manyAllChoseAlert3 =
                                            simpleAlert({
                                                content:
                                                    '最后确定－全关闭!',
                                                closeAll: true,
                                                buttons: {
                                                    确定: function () {
                                                        manyAllChoseAlert3.close()
                                                    }
                                                }
                                            })
                                    },
                                    取消: function () {
                                        manyAllChoseAlert2.close()
                                    }
                                }
                            })
                        },
                        取消: function () {
                            manyAllChoseAlert.close()
                        }
                    }
                })
            })
        })
    </script>
</body>

</html>